<template>
  <div>
    <el-form ref="setRobot" :model="setRobot" label-position="left"  label-width="120px">
      <el-form-item label="启用访客智能机器人">
        <el-select v-model="setRobot.robot" @visible-change="robotSelectShow">
          <el-option value="">请选择</el-option>
          <el-option
            v-for="item in robotConfig"
            :key="item._id"
            :label="item.robot_name_new"
            :disabled="item.disabled"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机器人头像：" style="margin-top: 10px" v-show="setRobot.robot !== ''">
        <el-progress :text-inside="true" :stroke-width="18" :percentage="systemMsgLogoUi.percent" :status="systemMsgLogoUi.type" v-if="systemMsgLogoUi.show"></el-progress>
        <div class="wrap_logo">
          <img v-show="setRobot.robotImg" :src="setRobot.robotImg" alt="" class="logo fl">
          <span class="upload-btn" id="uploadRobotLogo">点击上传图片</span>
          <span class="del_upload_file" v-show="setRobot.robotImg" @click="deleteUploadFile">删除</span>
          <el-tooltip class="item" effect="dark" popper-class="reportTip" placement="bottom" style="opacity: 1;">
            <div slot="content">
              上传的头像应用于机器人头像展示
            </div>
            <span class="tip" style="margin-left: 10px"><i class="iconfont icon-tixingweizhi"></i></span>
          </el-tooltip>
        </div>
        <div class="desc">支持jpg/jpeg/png/gif格式图片，文件需小于2MB</div>
      </el-form-item>
      <!-- <el-form-item label="启用机器人辅助座席" v-if="aiRobots.length > 0">
        <el-select v-model="setRobot.robotAssistId" @visible-change="robotSelectShow">
          <el-option value="">请选择</el-option>
          <el-option
            v-for="item in aiRobots"
            :key="item._id"
            :label="item.robot_name_new"
            :disabled="item.disabled"
            :value="item._id"
          >
          </el-option>
        </el-select>
        <div class="prompt"><span class="prompt">温馨提示：辅助座席机器人建议与访客机器人保持一致，机器人会主动学习座席与访客的对话，提高准确率。</span></div>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script>
  import {uploadTo7moorlogoImgDomain} from '@/utils/qiniuUtils'
  import {deepClone, getCurrentDate} from '@/utils/m7Utils'
  import * as uuid from 'uuid'
  export default {
    name: 'baseConfig',
    data () {
      return {
        robotConfig: [],
        aiRobots: [],
        m7uploaders: [],
        setRobot: { // 转人工设置
          robotAssistId: '',
          robot: '',
          robotType: '',
          robotImg: ''
        },
        systemMsgLogoUi: {       // 机器人头像上传进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        }
      }
    },
    props: {
      form: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    components: {
    },
    computed: {
    },
    methods: {
      robotSelectShow (show) {
        if (show) {
          this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
            if (res2 && res2.success && res2.data && res2.data.length > 0) {
              let aiRobot = res2.data
              let allRobot = this.robotConfig
              aiRobot.forEach((item1) => {
                item1._id = item1.Id
                item1.robot_name_new = item1.Nick
                let exist = allRobot.findIndex((all) => {
                  return all.Id === item1.Id
                })
                this.setRobot.robotType = res2.data[exist].robotType
                if (exist === undefined) {
                  allRobot.push(item1)
                } else {
                  allRobot.splice(exist, 1, item1)
                }
              })
              this.aiRobots = aiRobot
              this.robotConfig = allRobot
            }
          })
        }
      },
      deleteUploadFile () {
        this.setRobot.robotImg = ''
      },
        // 上传图片初始化的事件
      initUploadImageFile () {
        let account = this.$store.state.session.user.account
        let self = this
        let fileAdded = function (up, files) {}
        let beforeUploadSysLogo = function (up, file) {
          self.systemMsgLogoUi.show = true
          self.systemMsgLogoUi.percent = 0
        }
        let upProgressSysLogo = function (up, file) {
          self.systemMsgLogoUi.percent = file.percent
        }
        let upCompleteSysLogo = function (up, file) {
          self.systemMsgLogoUi.show = false
        }
        let systemLogouploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          self.$set(self.setRobot, 'robotImg', sourceLink)
          self.$message.success('图片上传成功')
        }
        let error = function (up, err, errTip) {
          if (errTip) {
            self.$message.error(errTip)
          }
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
          return key
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,gif,png,jpeg'}
          ]
        }
        this.m7uploaders.push(
          uploadTo7moorlogoImgDomain(this.$store.state.session.user._id, 'uploadRobotLogo', filters, fileAdded, beforeUploadSysLogo, upProgressSysLogo, upCompleteSysLogo, systemLogouploaded, error, key)
        )
      },
      open (val, isAdd) {
        if (isAdd) {
          this.setRobot = {
            robotAssistId: '',
            robot: '',
            robotImg: ''
          }
        } else {
          for (let key in this.setRobot) {
            this.setRobot[key] = deepClone(val[key])
          }
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initUploadImageFile()
      })
    },
    beforeDestroy () {
      this.m7uploaders.forEach(uploader => {
        uploader &&
        uploader.destroy &&
        uploader.destroy()
      })
    },
    beforeMount () {
      this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
        if (res2 && res2.success && res2.data && res2.data.length > 0) {
          let aiRobot = res2.data
          aiRobot.forEach((item1) => {
            item1._id = item1.Id
            item1.robot_name_new = item1.Nick
          })
          this.aiRobots = aiRobot
          let configArr = []
          this.robotConfig.forEach((config) => {
            if (config.robot_type !== 'didi') {
              configArr.push(config)
            }
          })
          this.robotConfig = configArr.concat(this.aiRobots)
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .margin-l-10
    margin-left 10px
  .width-440
    width 440px
  .prompt
    color $c-prompt
    line-height normal
    font-size 12px
  .desc
    color #3b5998
    clear both
    line-height 18px
  .tip
    cursor pointer
    display inline-block
    height 16px
    width 16px
    border 1px solid $c-main
    text-align center
    line-height 16px
    border-radius 50%
    margin-left 2px  
  .wrap_logo
    .logo
      max-width: 36px;
      max-height: 36px;
      margin-right: 20px;
    .upload-btn
      background: rgba(255,255,255,1);
      border-radius: 3px;
      border: 1px solid rgba(220,223,230,1);
      color: #666666;
      padding: 5px 8px;
      font-size: 12px;
      cursor pointer
    .del_upload_file
      color $c-pink
      margin-left 10px
  .iconfont
    font-size 10px
    color #459ae9
  .desc
    color #3b5998
    clear both
    line-height 18px
    font-size 12px
</style>
